<style>
.long-river-log-edit{
  color: #111;
}
.long-river-log-edit .page-title{
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 30px;
}
.long-river-log-edit .item-wraper{
  display: flex;
  margin-bottom: 30px;
}
.long-river-log-edit .item-box{
  flex-grow:1;
  flex: 1;
  display: flex;
}
.long-river-log-edit .label{
  width: 125px;
  text-align: right;
  background: transparent;
  font-weight: normal;
  color: #111;
}

.long-river-log-edit .txt{
  flex-grow:1;
}
.long-river-log-edit .guidao-title{
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 30px;
}
.long-river-log-edit .guidao-box{
  width: 100%;
  height: 80px;
}
.long-river-log-edit .guidao-box img{
  width: 100%;
  height: 100%;
}
</style>
<template>
  <div id="app" class="wrapper wrapper-content animated fadeInRight v-cloak long-river-log-edit" v-cloak>
    <div class="row">
      <div class="ibox float-e-margins">
        <p class="page-title">沱江文峰村段-【河长】</p>
        <div class="item-wraper">
          <div class="item-box">
            <div class="label">日志是否正常：</div>
            <div class="txt" style="color:red">异常</div>
          </div>
        </div>
        <div class="item-wraper">
          <div class="item-box">
            <div class="label">巡查河道：</div>
            <div class="txt">沱江文峰村段</div>
          </div>
          <div class="item-box">
            <div class="label">巡查开始时间：</div>
            <div class="txt">2020-02-02 19:16:16</div>
          </div>
          <div class="item-box">
            <div class="label">巡查结束时间：</div>
            <div class="txt">2020-02-02 19:16:16</div>
          </div>
        </div>
        <div class="item-wraper">
          <div class="item-box">
            <div class="label">任务内容：</div>
            <div class="txt">临时任务</div>
          </div>
          <div class="item-box">
            <div class="label">巡查公里数：</div>
            <div class="txt">20</div>
          </div>
          <div class="item-box">
            <div class="label">内容日志：</div>
            <div class="txt">无</div>
          </div>
        </div>
        <div class="item-wraper">
          <div class="item-box">
            <div class="label">照片：</div>
            <img src="../../assets/images/1.jpg" height="150" width="150">
            <img src="../../assets/images/1.jpg" height="150" width="150">
          </div>
        </div>
        <div class="guidao">
          <p class="guidao-title">轨道记录</p>
          <div class="guidao-box">
            <img src="../../assets/images/1.jpg">
          </div>
        </div>
        <div class="col-12 text-center" style="height: 50px;">
          <div style="text-align:center;margin-top:50px;">
            <input class="btn btn-primary btn-save" type="submit" value="保存"/>
            <a class="go-back" @click="lbox.closeMyBoxLayer()" href="javascript:">取消</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
  import '@/assets/css/style.css'

  import $ from '@/assets/js/jquery-vendor.js'
  import 'jquery.cookie'
  import axios from 'axios'
  import '@/assets/js/validate/validation-vendor.js'

  import {apiUtil, axiosContentType, site} from '@/assets/js/boss'
  import vueArea from '@/components/vue-area'

  export default {
    components: {
      'vue-area': vueArea
    },
    data() {
      return {
        item: {},
        parents: [],
        staffs: [],
        newFlag: 0,
        uuidToken: ''
      }
    },
    mounted() {
      let that = window.$vueApp = this;
      document.getElementsByTagName('body')[0].className = 'fixed-sidebar full-height-layout';
      $('#riverInfoForm').validate();
      that.staff.init(function () {
        that.newFlag = sessionStorage.getItem(site.riverInfo.info);
        if (that.newFlag) that.uuidToken = apiUtil.guid();
        if (apiUtil.existSessionKey(site.riverInfo.info)) {
          that.info();
        }
      });
      if (!that.item.areaIds || that.item.areaIds == null) {
        that.item.areaIds = '51,5110,511025,,'; // 默认选择省市县区域
      }
      that.staffList();
      that.list();
      // 监听河长值改变事件
      $('#bean-principalId').change(function () {
        var text = '';
        $(this).find('option:selected').each(function () {
          text += text === '' ? $.trim($(this).text()) : ',' + $.trim($(this).text());
        });
        $('#bean-principalName').val(text);
      });
    },
    methods: {
      info() {
        let that = this;
        axios.get(site.riverInfo.info + sessionStorage.getItem(site.riverInfo.info), {}).then(function (response) {
          var result = response.data;
          if (result.code === 0) {
            that.item = result.data;
          } else {
            alert(result.message);
          }
        });
      },
      staffList() {
        let that = this;
        axios.get(site.riverSupervisor.list, {}).then(function (response) {
          var result = response.data;
          if (result.code === 0) {
            that.staffs = result.data;
          } else {
            alert(result.message);
          }
        });
      },
      list() {
        let that = this;
        axios.get(site.riverInfo.list, {}).then(function (response) {
          var result = response.data;
          if (result.code === 0) {
            that.parents = result.data;
          } else {
            alert(result.message);
          }
        });
      },
      save() {
        let that = this;
        if ($('#riverInfoForm').valid()) {
          axios.post(site.riverInfo.save, $('#riverInfoForm').serialize()
            , axiosContentType.xWwwFormUrlencoded).then(function (response) {
            var result = response.data;
            // console.info("获取数据.." + JSON.stringify(result));
            if (result.code === 0) {
              parent.$vueApp.page();
              alert('保存成功!');
              that.lbox.closeMyBoxLayer()
            } else {
              alert(result.message);
            }
          });
        }
      }
    }
  }
</script>

